<template>
    <div class="app-container">
        <!-- 搜索 -->
        <div class="search-div">
            <el-form label-width="80px">
                <el-form-item label="角色名称">
                    <el-input v-model="searchObj.roleName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain icon="el-icon-search" @click="fetchData()">搜索</el-button>
                    <el-button type="success" plain icon="el-icon-refresh-left" @click="reset()">重置</el-button>
                    <el-button type="danger" plain icon="el-icon-document-add"  :disabled="$hasBP('bnt.sysRole.add')  === false" @click="addBtn()">添加</el-button>
                    <el-button type="danger" plain icon="el-icon-document-add" :disabled="$hasBP('bnt.sysRole.batchRemove')  === false" @click="batchRemove()">批量删除</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格 -->
        <el-table v-loading="listLoading" :data="list" border style="width: 100%;margin-top: 10px;"
            :row-class-name="tableRowClassName" :header-cell-style="getRowClass"
            @selection-change="handleSelectionChange">
            <!-- 复选框 -->
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" width="70" align="center">
                <template slot-scope="scope">
                    {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>

            <el-table-column prop="roleName" label="角色名称" />
            <el-table-column prop="roleCode" label="角色编码" />
            <el-table-column prop="createTime" label="创建时间" width="350" />
            <el-table-column prop="updateTime" label="修改时间" width="350" />
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini"  :disabled="$hasBP('bnt.sysRole.update')  === false" @click="edit(scope.row)" title="修改" />
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row)"
                    :disabled="$hasBP('bnt.sysRole.remove')  === false" title="删除" />
                    <el-button type="warning" icon="el-icon-baseball" size="mini" @click="showAssignAuth(scope.row)" :disabled="$hasBP('bnt.sysRole.assignAuth')  === false"
                        title="分配权限" />
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
            <el-pagination background @current-change="currentChange" @size-change="sizeChange"
                :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                :total="total" style="padding: 30px 0; text-align: center;">
            </el-pagination>
        </div>

        <!-- 新增角色弹出框 -->
        <el-dialog title="添加 或者 修改" :visible.sync="dialogVisible" width="30%">

            <!-- 表单 -->
            <el-form :model="sysRole" :rules="rules" ref="sysRole" label-width="80px">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="sysRole.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色编码" prop="roleCode">
                    <el-input v-model="sysRole.roleCode"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitRole(sysRole)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<style>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.el-table .default-row {
    background: #F0FFF0;
}
</style>
<script>
import api from '@/api/system/sysRole/sys-role'
export default {
    data() {
        return {
            listLoading: true, // 数据是否正在加载
            list: [], // 角色列表
            total: 0, // 总记录数
            page: 1, // 页码
            limit: 5, // 每页记录数
            searchObj: {}, // 查询条件
            dialogVisible: false, //控制弹出框的显示和隐藏
            labelPosition: 'right',//左对齐
            sysRole: {
                roleName: '',
                roleCode: '',
            },
            rules: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                ],
                roleCode: [
                    { required: true, message: '请输入用户编码', trigger: 'blur' },
                ],
            },
            multipleSelection: []// 批量删除选中的记录列表
        }
    },
    created() {
        this.fetchData();
    },
    methods: {
        // 调用api初始化Data
        fetchData() {
            api.getPageRoleList(this.page, this.limit, this.searchObj)
                .then(res => {
                    this.list = res.data.records;
                    this.total = res.data.total;
                    this.listLoading = false;
                })
        },
        // 表格颜色设置
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 3 === 0) {
                return 'warning-row';
            } else if (rowIndex % 3 === 1) {
                return 'success-row';
            } else {
                return 'default-row';
            }
        },
        // 设置表头颜色
        getRowClass({ row, rowIndex }) {
            return "background:#f8f8f9;";
        },
        // 分页参数变化
        sizeChange(size) {
            this.limit = size
            this.fetchData()
        },
        // 分页参数变化
        currentChange(current) {
            this.page = current;
            this.fetchData();
        },
        // 重置按钮
        reset() {
            this.searchObj = {}
            this.fetchData();

        },
        //根据id删除角色
        removeDataById(obj) {
            this.$confirm('此操作将永久删除  ' + obj.roleName + ' 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.removeRoleById(obj.id)
                    .then(res => {
                        this.fetchData();
                        this.$message.success(res.message || '删除成功')
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //添加按钮弹出框控制
        addBtn() {
            this.sysRole = {
                roleName: '',
                roleCode: '',
                id: ""
            }
            this.dialogVisible = true;
        },
        // 添加角色
        submitRole(sysRole) {
            if (!this.sysRole.id) {
                this.$refs.sysRole.validate((valid) => {
                    console.log(this.sysRole)
                    api.saveRole(this.sysRole)
                        .then(res => {
                            this.fetchData()
                            this.dialogVisible = false;
                            this.$message.success(res.message || '添加成功')
                        })
                })
                return;
            }
            api.updateRole(this.sysRole).then(res => {
                this.fetchData()
                this.dialogVisible = false;
                this.$message.success('修改成功')
            })
        },
        //修改角色
        edit(row) {
            api.getRoleInfoById(row.id).then(res => {
                this.sysRole = res.data;
            })
            this.dialogVisible = true;
        },
        // 批量删除
        batchRemove() {
            if (this.multipleSelection.length === 0) {
                this.$message.warning('请选择要删除的记录！')
                return
            }
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var ids = []
                this.multipleSelection.forEach(item => {
                    ids.push(item.id)
                })
                api.batchRemoveRole(ids).then(res => {
                    this.fetchData();
                    this.$message.success("批量删除成功！")
                })
            })
        },
        // 获取到多选框的选中列
        handleSelectionChange(selection) {
            this.multipleSelection = selection;
        },
        // 跳转分配权限
        showAssignAuth(roeObj) {
            this.$router.push('/system/assignAuth?id=' + roeObj.id + '&roleName=' + roeObj.roleName)
        }

    }
}
</script>